<template>
    <div class="main">
        <div class="login">
            <el-form :model="user" class="user_form" :rules="userRules" ref="userFormRef">
                <el-form-item prop="pwd">
                    <el-input v-model="user.pwd" placeholder="密码" :prefix-icon="Lock" show-password />
                </el-form-item>
                <el-form-item prop="pwdagain">
                    <el-input v-model="user.pwdagain" placeholder="再次输入密码" :prefix-icon="Lock" show-password />
                </el-form-item>
                <el-form-item prop="nickname">
                    <el-input v-model="user.nickname" placeholder="昵称" :prefix-icon="Lock"/>
                </el-form-item>
                <p>年龄：</p><el-input-number v-model="user.age" :min="18" :max="30" @change="handleChange" /><br>
                <el-radio-group v-model="user.sex" style="margin-top: 15px;">
                    <el-radio :value="1">男</el-radio>
                    <el-radio :value="2">女</el-radio>
                </el-radio-group><br>
                <el-select v-model="user.college" placeholder="学院" size="large" style="width: 240px; margin-top: 15px; margin-bottom: 15px">
                    <el-option v-for="item in college_options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select><br>
                <el-form-item class="btns" >
                    <el-button type="primary" @click="updata()" style="margin-top: 30xp;">提交修改</el-button>
                    <el-button type="success" @click="resetForm(userFormRef)">重置</el-button>
                </el-form-item>
                
            </el-form>
        </div>
    </div>
</template>
  
<script setup>

import { reactive, ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted } from 'vue';
// import api from '@/api/index.js'    // 导入api接口
import api from '@/api/index.js'
import router from '@/router';

// 定义表单数据
const user = reactive({
    pwd: '',
    pwdagain:'',
    nickname: '',
    age: 18,
    sex: '',
    college: '',
})

const college_options = [{
    value: '1',
    label: '经济与管理学院',
}, {
    value: '2',
    label: '文化与法律学院',
}, {
    value: '3',
    label: '艺术与传媒学院',
}, {
    value: '4',
    label: '教育学院',
}, {
    value: '5',
    label: '外国语学院',
}, {
    value: '6',
    label: '马克思主义学院',
}, {
    value: '7',
    label: '体育学院',
}, {
    value: '8',
    label: '大数据与人工智能学院',
}, {
    value: '9',
    label: '电子与机械工程学院',
}, {
    value: '10',
    label: '材料与包装工程学院',
}, {
    value: '11',
    label: '食品与生物工程学院',
}, {
    value: '12',
    label: '海洋学院',
}, {
    value: '13',
    label: '继续教育学院',
}]

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== user.pwd) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

// 定义表单验证规则
const userRules = {
    pwd: [{ min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' }],
    pwdagain: [
        { validator: validatePass2, trigger: ['blur'] },
    ],
}

const userFormRef = ref(null)

const resetForm = (formRef) => {
  formRef.resetFields()
}

// 提交修改,修改后跳转到登录页面，重新登录
const updata = () =>{
    api.user_updata(user).then((res) => {
        console.log(res)
        if (res.data.msg == "修改成功") {
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            router.push("/login")
        } else {
            ElMessage({
                message: res.data.msg,
                type: 'error',
            })
        }
    })
}

</script>
  

<style scoped>

.main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login {
    width: 700px;
    height: 700px;
    background-color: white;
    border-radius: 5px;
}

.user_form {
  padding: 50px;
}


.btns {
  display: flex;
  justify-content: space-between;
}

</style>